$(function () {
    $("#jqGrid").jqGrid({
        url: '../offface/list',     // 请求后台json数据的url
        datatype: "json",                // 后台返回的数据格式
        // 列表标题及列表模型
        colModel: [
            {label: 'id', name: 'id', index: 'id', width: 50, key: true},
            {label: '人员姓名', name: 'truename', index: 'trueName', width: 80},
            {label: '身份证号', name: 'facenumber', index: 'faceNumber', width: 80},
            {label: '类型', name: 'type', index: 'type', width: 80},
            /*  {label: '日期', name: 'date', index: 'date', width: 80},*/
            /* {label: '状态', name: 'status', index: 'status', width: 80},*/
            {label: '人脸图片', name: 'url', index: 'url', width: 80, formatter: vm.alarmFormatter},
            /* { name: '人脸图片', index: 'url', width:80, sortable: false, editable: false, formatter: vm.alarmFormatter },*/
            {label: '创建者ID', name: 'createUserId', index: 'create_user_id', width: 80},
            {label: '创建时间', name: 'createTime', index: 'create_time', width: 80},
            /*       {label: '删除时间', name: 'delTime', index: 'del_time', width: 80},*/
            {label: '组织代码', name: 'companycode', index: 'companycode', width: 80}

        ],
        viewrecords: true,     // 是否显示行号，默认值是false，不显示
        height: 385,            // 表格高度
        rowNum: 50,             // 一页显示的行记录数
        rowList: [50, 100],     // 翻页控制条中 每页显示记录数可选集合
        rownumbers: true,
        rownumWidth: 25,
        autowidth: true,
        multiselect: true,
        pager: "#jqGridPager",          // 翻页DOM
        jsonReader: {                   // 重写后台返回数据的属性
            root: "page.list",          // 将rows修改为page.list
            page: "page.currPage",      // 将page修改为page.currPage
            total: "page.totalPage",    // 将total修改为page.totalPage
            records: "page.totalCount"  // 将records修改为page.totalCount
        },
        prmNames: {              // 改写请求参数属性
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
            //设置高度
            $("#jqGrid").jqGrid('setGridHeight', getWinH());
        }
    });


    var oFileInput = new FileInput();
    oFileInput.Init("inputexcel", "../offface/importexcel");


    var zipFileInput = new ZipFileInput();
    zipFileInput.Init("uploadzip", "../offface/uploadzip");


    function initFileInput() {
        var projectfileoptions = {
            language: 'zh'
        };
        $("#face").fileinput(projectfileoptions);
    }


});


var ZipFileInput = function () {
    var oFile = new Object();

    //初始化fileinput控件（第一次初始化）
    oFile.Init = function (ctrlName, uploadUrl) {
        var control = $('#' + ctrlName);

        //初始化上传控件的样式
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl, //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png', 'xlsx', 'xls', "zip"],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 10, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        });


        $("#uploadzip").on("fileuploaded", function (event, data, previewId, index) {
            $("#uploadzipmodal").modal("hide");
        });
    };
    return oFile;
};


var FileInput = function () {
    var oFile = new Object();

    //初始化fileinput控件（第一次初始化）
    oFile.Init = function (ctrlName, uploadUrl) {
        var control = $('#' + ctrlName);

        //初始化上传控件的样式
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl, //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png', 'xlsx', 'xls', "zip"],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 10, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            uploadExtraData: function (previewId, index) {   //额外参数的关键点
                var param = {};
                param.period = $("#period").val();
                console.log(param);
                return param;
            }
        });

        //导入文件上传完成之后的事件
        $("#inputexcel").on("fileuploaded", function (event, data, previewId, index) {
            $("#uploadmodal").modal("hide");
        });


    };
    return oFile;
};
var vm = new Vue({
    el: '#rrapp',
    data: {
        showList: true,
        title: null,
        uploadmodal: false,
        offFace: {}
    },
    methods: {
        query: function () {
            //vm.reload();
            $("#jqGrid").jqGrid('setGridParam', {
                postData: {
                    keyword: $("#keyword").val()
                },
                page: 1
            }).trigger("reloadGrid");
        },
        add: function () {
            vm.showList = false;
            vm.title = "新增";
            vm.offFace = {};
        },
        update: function (event) {
            var id = getSelectedRow();
            if (id == null) {
                return;
            }
            vm.showList = false;
            vm.title = "修改";

            vm.getInfo(id)
        },
        saveOrUpdate: function (event) {
            var url = vm.offFace.id == null ? "../offface/save" : "../offface/update";
            var formdata = new FormData(document.getElementById("upform"));
            $.ajax({
                type: "POST",
                url: url,
                data: formdata,
                contentType: false,
                //取消帮我们格式化数据，是什么就是什么
                processData: false,
                success: function (r) {
                    if (r.code === 0) {
                        alert('操作成功', function (index) {
                            vm.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                }
            });
        },
        del: function (event) {
            var ids = getSelectedRows();
            if (ids == null) {
                return;
            }

            confirm('确定要删除选中的记录？', function () {
                $.ajax({
                    type: "POST",
                    url: "../offface/delete",
                    data: JSON.stringify(ids),
                    success: function (r) {
                        if (r.code == 0) {
                            alert('操作成功', function (index) {
                                $("#jqGrid").trigger("reloadGrid");
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            });
        },
        getInfo: function (id) {
            $.get("../offface/info/" + id, function (r) {
                vm.offFace = r.offFace;
                //更新输入框高度
                autosize.update($('textarea'));
            });
        },
        reload: function (event) {
            vm.showList = true;
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                page: page
            }).trigger("reloadGrid");
        },
        alarmFormatter: function (cellvalue, options, rowdata) {
            if (vm.ipref == "172.16.10.10:36319") {
                return ' <img src=' + rowdata.url + ' style="width:80px;height:40px;" />';

            } else {
                var url = rowdata.url.replace(/172.16.10.10:36319/, vm.ipref);
                console.log(url);
                return ' <img src=' + url + ' style="width:80px;height:40px;" />';

            }
        },
        upload: function () {
            $('#uploadmodal').modal({
                keyboard: true
            });
        },
        uploadface: function () {
            $('#uploadzipmodal').modal({
                keyboard: true
            });
        },
        uploadData: function () {

        },
        alarmFormatter: function (cellvalue, options, rowdata) {
            if (typeof(rowdata.url) != "undefined") {
                return ' <img src=' + rowdata.url + ' style="width:80px;height:40px;" />';
            }

        }
    }
});

// 图片自适应


// textarea 高度自动扩展
autosize($('textarea'));